<template>
  <div class="verification-page">
    <Back-top></Back-top>
    <Nav active-name="verification"/>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png" />
      <div class="item active">验证客服</div>
    </div>
    <div class="sec-01">
      <div class="tip-box flex-center">请输入QQ号、微信号、支付宝账号，验证客服信息，谨防诈骗</div>
      <div class="search-box flex-row-v-center">
        <input class="input flex-1" v-model="account" placeholder="请输入账号" />
        <div class="search-btn flex-center" @click="verifyServiceAccount">
          点击验证
        </div>
      </div>
      <div class="result flex-col-v-center" v-if="result.show && !result.txt">
        <p class="error">注意：非梓良代售工作号！谨防受骗！</p>
      </div>
      <div class="result flex-col-v-center" v-if="result.show && result.txt">
        <p>是梓良代售工作号码！安心交易！</p>
        <p>备注：{{result.txt.remark}}</p>
        <p>创建时间：{{result.txt.create_time}}</p>
      </div>
      <div class="service-box">
        <div class="title">官方客服</div>
        <div class="content">
          <div class="item" v-for="item in list" :key="item.id">
            <img src="~assets/img/icon-service.png"/>
            <div class="qq-content">
              <div class="name">{{ item.remark }}</div>
              <div class="qq">{{ item.account }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Core from '@/core/core'
export default {
  data() {
    return {
      account: '',
      result: {
        show: false,
        txt: {}
      },
      list: []
    }
  },
  mounted() {
    this.getServiceAccountList()
  },
  methods: {
    getServiceAccountList() {
      Core.Api.CustomerService.list({})
        .then(res => {
          this.list = res.list
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
    },
    verifyServiceAccount() {
      if (!this.account.trim()) {
        this.$Message.warning("请输入账号进行客服验证");
        return
      }
      Core.Api.CustomerService.search({account: this.account})
        .then(res => {
          this.result.show = true
          this.result.txt = res
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.verification-page {
  background: rgb(245, 245, 245);

  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;
    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;
      &.active {
        color: #3A3D41;
      }
    }
    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    width: 1200px;
    background: #ffffff;
    margin: auto;
    .tip-box {
      height: 40px;
      background: #FFFAF3;
      border-radius: 6px 6px 0 0;
      font-weight: 500;
      font-size: 12px;
      color: #F58B01;
    }
    .search-box {
      width: 500px;
      height: 40px;
      border: 1px solid #F58B01;
      border-radius: 25px;
      margin: 80px auto 0 auto;
      padding: 2px;
      .input {
        padding: 0 10px;
        font-size: 14px;
        color: #8D9197;
        border: none;
        background: transparent;
        height: 100%;
        outline: none;
      }
      .search-btn {
        background: #F58B01;
        border-radius: 18px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        height: 36px;
        padding: 0 13px;
        cursor: pointer;
      }
    }
    .result {
      margin-top: 30px;
      p {
        font-weight: 500;
        font-size: 16px;
        color: #19be6b;
        line-height: 22px;
        &.error {
          color: #F58B01;
        }
      }
    }
    .service-box {
      width: 940px;
      margin: 80px auto 0 auto;
      .title {
        font-weight: 600;
        font-size: 20px;
        color: #3A3D41;
        line-height: 28px;
      }
      .content {
        font-size: 0;
        padding: 20px 0;
        .item {
          display: inline-block;
          width: 299px;
          height: 82px;
          background: #F5F5F5;
          border-radius: 6px;
          margin-right: 20px;
          margin-bottom: 20px;
          padding: 20px;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
          img {
            width: 42px;
            height: 42px;
          }
          .qq-content {
            position: absolute;
            left: 62px;
            right: 0;
            top: 20px;
            bottom: 20px;
            padding: 0 12px;
            .name {
              font-size: 16px;
              color: #3A3D41;
              line-height: 22px;
            }
            .qq {
              font-size: 13px;
              color: #7F8389;
              line-height: 18px;
              margin-top: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
